<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>急速文件 - 我的</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
    <style>
        .profile-section {
            background-color: white;
            border-radius: 12px;
            margin: 16px;
            overflow: hidden;
        }
        
        .user-header {
            padding: 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .user-avatar {
            width: 70px;
            height: 70px;
            border-radius: 35px;
            object-fit: cover;
            margin-right: 16px;
            border: 2px solid var(--primary-color);
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 4px;
            color: #333;
        }
        
        .user-id {
            font-size: 14px;
            color: #999;
            margin-bottom: 8px;
        }
        
        .user-edit {
            color: var(--primary-color);
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .user-edit i {
            margin-right: 4px;
        }
        
        .right-arrow {
            color: #ccc;
            font-size: 18px;
        }
        
        .storage-info {
            padding: 20px;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .storage-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        
        .storage-title {
            font-weight: 500;
            color: #333;
        }
        
        .storage-quota {
            color: #999;
            font-size: 14px;
        }
        
        .menu-item {
            padding: 16px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-icon {
            width: 36px;
            height: 36px;
            border-radius: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 16px;
            color: white;
        }
        
        .menu-text {
            flex: 1;
            font-size: 16px;
            color: #333;
        }
        
        .vip-banner {
            background: linear-gradient(135deg, #FF9800, #F57C00);
            padding: 20px;
            margin: 16px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            color: white;
        }
        
        .vip-icon {
            font-size: 36px;
            margin-right: 16px;
        }
        
        .vip-info {
            flex: 1;
        }
        
        .vip-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .vip-desc {
            font-size: 14px;
            opacity: 0.9;
        }
        
        .vip-button {
            background-color: white;
            color: #FF9800;
            border-radius: 20px;
            padding: 8px 16px;
            font-weight: 500;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="iphone-container">
        <!-- 顶部状态栏 -->
        <div class="status-bar">
            <div class="left">9:41</div>
            <div class="center"></div>
            <div class="right">
                <i class="fas fa-signal" style="margin-right: 5px;"></i>
                <i class="fas fa-wifi" style="margin-right: 5px;"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-bar-title">我的</div>
            <div>
                <i class="fas fa-qrcode" style="margin-right: 12px;"></i>
                <i class="fas fa-bell"></i>
            </div>
        </div>
        
        <!-- 应用内容区 -->
        <div class="app-content">
            <!-- 用户信息 -->
            <div class="profile-section">
                <div class="user-header">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <div class="user-name">张三</div>
                        <div class="user-id">ID: 88564390</div>
                        <div class="user-edit">
                            <i class="fas fa-edit"></i>
                            <span>编辑个人资料</span>
                        </div>
                    </div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
                
                <!-- 存储信息 -->
                <div class="storage-info">
                    <div class="storage-header">
                        <div class="storage-title">已用存储空间</div>
                        <div class="storage-quota">116GB / 256GB</div>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-bar-fill" style="width: 45%;"></div>
                    </div>
                </div>
                
                <!-- 快捷功能 -->
                <div class="menu-item" onclick="location.href='files.html'">
                    <div class="menu-icon" style="background-color: #03A9F4;">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="menu-text">最近使用</div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon" style="background-color: #4CAF50;">
                        <i class="fas fa-download"></i>
                    </div>
                    <div class="menu-text">我的下载</div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon" style="background-color: #FF9800;">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="menu-text">我的收藏</div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
            </div>
            
            <!-- VIP会员 -->
            <div class="vip-banner">
                <div class="vip-icon">
                    <i class="fas fa-crown"></i>
                </div>
                <div class="vip-info">
                    <div class="vip-title">开通VIP会员</div>
                    <div class="vip-desc">享受超大存储空间和更多特权</div>
                </div>
                <div class="vip-button">立即开通</div>
            </div>
            
            <!-- 工具和设置 -->
            <div class="profile-section">
                <div class="menu-item">
                    <div class="menu-icon" style="background-color: #E91E63;">
                        <i class="fas fa-share-alt"></i>
                    </div>
                    <div class="menu-text">邀请好友</div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
                
                <div class="menu-item">
                    <div class="menu-icon" style="background-color: #9C27B0;">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="menu-text">帮助中心</div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
                
                <div class="menu-item" onclick="location.href='settings.html'">
                    <div class="menu-icon" style="background-color: #607D8B;">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="menu-text">设置</div>
                    <i class="fas fa-chevron-right right-arrow"></i>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <div class="tab-item">
                <i class="fas fa-home tab-icon"></i>
                <span class="tab-label">首页</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-folder tab-icon"></i>
                <span class="tab-label">文件</span>
            </div>
            <div class="tab-item">
                <i class="fas fa-image tab-icon"></i>
                <span class="tab-label">相册</span>
            </div>
            <div class="tab-item active">
                <i class="fas fa-user tab-icon"></i>
                <span class="tab-label">我的</span>
            </div>
        </div>
    </div>
</body>
</html> 